import styles from './index.less';
import React, { memo, useState } from 'react';
import Draggable from 'react-draggable';
import { connect } from 'react-redux';
function index({ showSelectCompPanel, project, save }: any) {
  const {mode} = project;

  return (
    <Draggable
      handle=".handle"
      defaultPosition={{ x: 0, y: 0 }}
      grid={[5, 5]}
      scale={1}
      bounds={{
        left: -10,
        top: -10,
        right: window.innerWidth - 360,
        bottom: window.innerHeight - 240
      }}
    >
      <div className={styles.designBar}>
        {/* 拖拽手柄 */}
        <div className={`handle ${styles.dragHandle}`}>
          <i className={`iconfont icon-draghandle ${styles.dragHandle}`}></i>
        </div>
        {/* 添加组件 */}
        <div className={`${styles.addComp}`} onClick={showSelectCompPanel}>
          <i className="iconfont icon-tianjiajiahaowubiankuang"></i>
        </div>
        {/* 设计模式 */}
        <div className={`${styles.addComp} ${mode === 'design' ? styles.active : ''}`} onClick={() => save({mode: 'design'})}>
          <i className="iconfont icon-dashujukeshihuaico-"></i>
        </div>
        {/* 代码模式 */}
        <div className={`${styles.addComp} ${mode === 'code' ? styles.active : ''}`} onClick={() => save({mode: 'code'})}>
          <i className="iconfont icon-code"></i>
        </div>
      </div>
    </Draggable>
  );
}

export default connect(
  ({ project }: any) => ({ project }),
  {
    showSelectCompPanel: () => ({ type: 'project/showSelectCompPanel' }),
    save: (payload: any) => ({ type: 'project/save', payload })
  }
)(memo(index));